<template>
    <div class="">
      <el-form ref="ruleFormRef" action="#" v-loading="loading" :model="ruleForm" status-icon :rules="rules" label-width="auto"
        class="demo-ruleForm">
        <table class="table-form" >
          <tr>
            <td class="vform-title">
              项目名称
            </td>
            <td colspan="5">
              <el-select class="custom-select" v-model="ruleForm.object_id" clearable placeholder="请选择">
                <el-option
                  v-for="item in objectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="vform-title">
              运行区域
            </td>
            <td colspan="">
               <el-select v-model="ruleForm.site_id" clearable placeholder="请选择">
                <el-option
                  v-for="item in siteData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            <td class="vform-title">
              运行日期
            </td>
            <td>
              <el-date-picker
                v-model="ruleForm.day_time"
                style="width: 100%;"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td :rowspan="ruleForm.onoff_list.length+1" >
              开关机记录
            </td>
            <td style="min-width: 180px;">
             开/关机时间
            </td>
            <td >
              运行人员
            </td>
            <td>
              
              <div class="fx">
                <div class="fx-1">
                  停机原因
                </div>
                <CirclePlusFilled @click="addOnOff" class="icon" color="#52c41a" />
              </div>
            </td>
          </tr>
          <tr v-for="(item, index) in ruleForm.onoff_list">
            <td>
              <el-time-picker
                v-model="item.times"
                style="width: auto;"
                is-range
                range-separator="-"
                start-placeholder="开机时间"
                end-placeholder="停机时间"
              />
            </td>
           <td>
            <el-select
                v-model="item.user_ids"
                multiple
                placeholder="请选择值班人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userDatas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
           </td>
            <td>
              <div class="fx">
                <div class="fx-1">
                  <el-select
                v-model="item.reason_id"
                multiple
                placeholder="请选择停机原因"
                style="width: 100%"
              >
                <el-option
                  v-for="item in onoffDatas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
                </el-select>
                </div>
                <RemoveFilled @click="deleteItem(index)" class="icon" color="#ef8888" />
                
              </div>
            </td>
          </tr>
          <tr >
            <td>
              运行情况
            </td>
            <td >
              <el-switch
                v-model="ruleForm.is_run"
                active-value="1"
                inactive-value="2"
                active-text="运行"
                inactive-text="停机"
                inline-prompt
              />
            </td>
            <td >
              运行时长
            </td>
            <td>
              3h
            </td>
          </tr>
          <tr >
            <td class="vform-title">
              运行人员
            </td>
            <td colspan="4">
              <el-select
                v-model="ruleForm.is_run_users"
                multiple
                placeholder="请选择值班人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userDatas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td rowspan="2">
              富藻水处理水量<br>（流量计㎡）
            </td>
            <td>
              开机流量
            </td>
            <td >
              <el-input v-model="ruleForm.shui_chuli_start"  type="number"  autocomplete="off"  :disabled="disabled" >
                <template #append>m³</template>
              </el-input>
            </td>
          
            <td rowspan="2">
              <el-input v-model="ruleForm.shui_chuli"  type="number"  autocomplete="off" :disabled="disabled">
                <template #append>m³</template>
              </el-input>
            </td>
            
          </tr>
          <tr>
           
            <td>
              关机流量
            </td>
            <td >
              <el-input v-model="ruleForm.shui_chuli_close"   type="number"  autocomplete="off" :disabled="disabled">
                <template #append>m³</template>
              </el-input>
            </td>
            
          </tr>
          <tr>
            <td rowspan="4">
              药剂消耗量<br>（kg）
            </td>
            <td rowspan="2">
              聚合氯化铝
            </td>
            <td>
              气浮
            </td>
            <td>
              <el-input v-model="ruleForm.yaoji_pac_qf"  type="number"  autocomplete="off" :disabled="disabled">
                <template #append>Kg</template>
              </el-input>
            </td>
           
          </tr>
          <tr>
            <td >
              脱水
            </td>
            <td>
              <el-input v-model="ruleForm.yaoji_pac_ts"  type="number"  autocomplete="off" :disabled="disabled">
                <template #append>Kg</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="2" class="td-rigth">
              聚合氯化铝
            </td>
            <td>
              气浮
            </td>
            <td>
              <el-input v-model="ruleForm.yaoji_pam_qf"  type="number"  autocomplete="off" :disabled="disabled">
                <template #append>Kg</template>
              </el-input>
            </td>
           
          </tr>
          <tr>
            <td >
              脱水
            </td>
            <td>
              <el-input v-model="ruleForm.yaoji_pam_ts"  type="number"  autocomplete="off" :disabled="disabled">
              <template #append>Kg</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="4">
              能耗
            </td>
            <td rowspan="2">
              汽油
            </td>
            <td >
              领取
            </td>
            <td>
              <el-input v-model="ruleForm.qy_lq"  type="number"  autocomplete="off" :disabled="disabled" >
                <template #append>L</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td>
              消耗
            </td>
            <td>
              <el-input v-model="ruleForm.qy_xh"  type="number"  autocomplete="off" :disabled="disabled">
              <template #append>L</template>
              </el-input>
            </td>
          </tr>
          <tr>
           
            <td rowspan="2">
              柴油
            </td>
            <td >
              领取
            </td>
            <td>
              <el-input v-model="ruleForm.cy_lq"  type="number"  autocomplete="off" :disabled="disabled" >
              <template #append>L</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td>
              消耗
            </td>
            <td>
              <el-input v-model="ruleForm.cy_xh"  type="number"  autocomplete="off" :disabled="disabled">
              <template #append>L</template>
              </el-input>
            </td>
          </tr>
         
          <tr>
            <td >
              备注
            </td>
            <td colspan="3">
              <el-input v-model="ruleForm.content" autosize :disabled="disabled" type="textarea"  autocomplete="off">
            </el-input>
            </td>
          </tr>
          <tr>
            <td class="vform-title">
              填表人
            </td>
            <td >
              <el-select
                v-model="ruleForm.create_user_id"
                placeholder="请选择创建人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userDatas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </td>
            <td class="vform-title">
              审核人
            </td>
            <td >
              <el-select
                v-model="ruleForm.check_user_id"
                
                placeholder="请选择创建人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userDatas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </td>
          </tr>
        </table>

      </el-form>
    </div>
  </template>
  <script lang="ts" setup>
  import { onMounted, reactive, ref, defineEmits, defineProps } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { equipApi } from '@/utils/api/equip';
  import { siteApi } from '@/utils/api/site';
  import { userApi } from '@/utils/api/admin';
  import { ElMessage } from 'element-plus'
import { id } from 'element-plus/es/locales.mjs';
  const props = defineProps({
    id: Number,
    type: String,
    pid: Number
  });
  const disabled = ref(false)
  if (props.type === 'info') {
    disabled.value = true
  }

  const objectData = ref([
    {
      value: 1,
      label: '1项目'
      },{
      value:2,
      label: '2项目'
      },
    ])
  
  const siteData = ref([
  {
    value:1,
    label: '捞鱼河'
    },{
    value:13,
    label: '外海'
    },
  ])

  const userDatas = ref([
  {
    value:1,
    label: '孙楠'
    },{
    value:2,
    label: '李龙威'
    },
  ])
  const onoffDatas = ref([
  {
    value:1,
    label: '无藻停机'
    },{
    value:2,
    label: '设备维修'
    },
  ])
  // 定义自定义事件
  const emits = defineEmits(['close-dialog']);
  // 使用 useRoute 获取参数
  const loading = ref(false)
  
  
  const getInfo = async (id: string) => {
    // 这里是获取信息的接口
    console.log(id,'jiba')
  
    loading.value = true
    const res = await equipApi.info({ id: id })
    res.data.avatar = res.data.avatar?JSON.parse(res.data.avatar):[]
    console.log(res.data,'详情')
    loading.value = false
    Object.assign(ruleForm, res.data)
  }
  
  const tableData = ref([
    {
      id: 0,
      name: '一级',
      code:''
    }
  ])
  
  const ruleFormRef = ref < FormInstance > ()
  
  interface IForm {
    id: string
    equip_id: string
    equip_name: string
    equip_code: string
    object_id: string
    object_name: string
    site_id: string
    site_name: string
    day_time: string

    onoff_list: Array<any>

    is_run:Number
    is_run_hour:Number
    is_run_users:Array<any>

    shui_chuli_start:Number
    shui_chuli_close:Number
    shui_chuli:Number

    yaoji_pam:Number
    yaoji_pam_qf:Number
    yaoji_pam_ts:Number

    yaoji_pac:Number
    yaoji_pac_qf:Number
    yaoji_pac_ts:Number

    qy_lq:Number
    qy_xh:Number
    cy_lq:Number
    cy_xh:Number
    

    content:string

    create_user_id:Number
    create_user_name:string
    check_user_id:Number
    check_user_name:string

    

  }
  
  const ruleForm = reactive < IForm > ({
    id: '',
    equip_id: '',
    equip_name: '',
    equip_code: '',
    object_id: '',
    object_name: '',
    site_id: '',
    site_name: '',
    day_time: '',

    onoff_list: [
      {
        id:1,
        times: [ new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        start_time:new Date(2016, 9, 10, 8, 40),
        end_time:new Date(2016, 9, 10, 9, 40),
        hour:21,
        reason_id:1,
        reason_name:'无藻停机',
        reason:'',
        user_id:1,
        user_name:'孙楠',
        user_ids:[],
        users:[{
          id:1,
          name:'孙楠'
        },{
          id:123,
          name:'以后呢'
        }]
      },{
        id:1,
        times: [ new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        start_time:new Date(2016, 9, 10, 8, 40),
        end_time:new Date(2016, 9, 10, 9, 40),
        hour:21,
        reason_id:1,
        reason_name:'无藻停机',
        reason:'',
        user_id:1,
        user_name:'孙楠',
        user_ids:[],
        users:[{
          id:1,
          name:'孙楠'
        },{
          id:123,
          name:'以后呢'
        }]
      }
    ],

    is_run:0,
    is_run_hour:0,
    is_run_users:[],

    shui_chuli_start:0,
    shui_chuli_close:0,
    shui_chuli:0,

    yaoji_pam:0,
    yaoji_pam_qf:0,
    yaoji_pam_ts:0,

    yaoji_pac:0,
    yaoji_pac_qf:0,
    yaoji_pac_ts:0,

    qy_lq:0,
    qy_xh:0,
    cy_lq:0,
    cy_xh:0,

    content: '',

    create_user_id:0,
    create_user_name:'',
    check_user_id:0,
    check_user_name:''
  })
  
  const rules = reactive < FormRules < typeof ruleForm >> ({
    equip_id: [
      { required: true, message: '请选择项目', trigger: 'change' }
    ],
    equip_name: [
      { required: true, message: '请输入项目名称', trigger: 'blur' }
    ],
    equip_code: [
      { required: true, message: '请输入项目编号', trigger: 'blur' }
    ],
    object_id: [
      { required: true, message: '请选择运行区域', trigger: 'change' }
    ],
    object_name: [
      { required: true, message: '请输入运行区域', trigger: 'blur' }
    ],
    site_id: [
      { required: true, message: '请选择运行区域', trigger: 'change' }
    ],
    site_name: [
      { required: true, message: '请输入运行区域', trigger: 'blur' }
    ],
    day_time: [
      { required: true, message: '请选择运行日期', trigger: 'change' }
    ],
    is_run: [
      { required: true, message: '请选择运行状态', trigger: 'change' }
    ],
  
    is_run_users: [
      { required: true, message: '请输入运行人员', trigger: 'blur' }
    ],
    
    create_user_id: [
      { required: true, message: '请输入填表人', trigger: 'blur' }
    ],
    create_user_name: [
      { required: true, message: '请输入填表人', trigger: 'blur' }
    ],
    check_user_id: [
      { required: true, message: '请输入审核人', trigger: 'blur' }
    ],
    check_user_name: [
      { required: true, message: '请输入审核人', trigger: 'blur' }
    ]
  })
  
  const addOnOff = () => {
    ruleForm.onoff_list.push({
      id:ruleForm.onoff_list.length+1,
      times:[ new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      start_time:new Date(2016, 9, 10, 8, 40),
      end_time:new Date(2016, 9, 10, 9, 40),
      hour:0,
      reason_id:1,
      reason_name:'无藻停机',
      reason:'',
      user_id:1,
      user_name:'孙楠',
      users:[]
    })
  }

  const deleteItem = (index: number) => {
    ruleForm.onoff_list.splice(index, 1)
  }
  
  
  const submitForm = (formEl: FormInstance | undefined) => {
    console.log(ruleForm,'000')
  
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        loading.value = true
        if (ruleForm.id == null) {
          equipApi.create(ruleForm).then((res) => {
            loading.value = false
            if (res.code === 200) {
              emits('close-dialog');
            } else {
              ElMessage.error(res.msg)
            }
          })
        } else {
          equipApi.update(ruleForm).then((res) => {
            loading.value = false
            if (res.code === 200) {
              emits('close-dialog');
            } else {
              ElMessage.error(res.msg)
            }
          })
        }
  
      } else {
        loading.value = false
  
        console.log('error submit!')
      }
    })
  }
  const oldTreeData = ref([])
  
  const treeSelectChange = (e) => {
    for(var i in oldTreeData.value){
      if (oldTreeData.value[i].id === e && ruleForm.id === null) {
        ruleForm.code = oldTreeData.value[i].code
      }
    }
  
  }
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const getResAll = async() => {

    try {
      const [res1, res2,res3] = await Promise.all([
          userApi.getAll({type:[1,2]}),
          equipApi.getAll({}),
          siteApi.getAll({}),
          siteApi.getAll({})
      ]);
        console.log(res1,res2,res3)
     
    }catch(err){
      console.log('失败',err)
    }
   
  }

  onMounted(() => {
    console.log(props.id, '之心')
    // 获取数据
    getResAll()

    if (props.id) {
      getInfo(props.id)
    }
  
  })
  </script>
  
  <style scoped lang="less">
  .demo-ruleForm {
    background: #fff;
    padding: 20px;
    margin-top: 10px;
  }
  .table-form{
    padding: 0;
    border: 1px solid #000;
    border-bottom: 0px;
    border-right: none;

     /* 合并单元格边框 */
     border-collapse: collapse;
      /* 移除表格的间距 */
      border-spacing: 0;
      /* 去除表格可能有的默认外边距 */
      margin: 0;
      /* 去除表格可能有的默认内边距 */
      padding: 0;
      /* 设置表格宽度为自动适应内容 */
      width: auto;
      /* 设置表格的字体大小为继承父元素的字体大小 */
      font-size: inherit;
      /* 设置表格的字体族为继承父元素的字体族 */
      font-family: inherit;
      width: 100%;
      font-size: 14px;
    td{
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      padding: 5px;
      margin: 0;
      text-align: center;
      position: relative;
      width: 25%;
      color: #616161;
    }
    .icon{
      // text-align: right;
      // position: absolute;
      // right: 10px;
      cursor: pointer;
      font-size: 16px;
      width: 20px;
      height: 20px;
    }
    .input-item{
      color: #f00 !important;
    }
    .fx{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .fx-1{
      flex: 1%;
      
    }
    .fx-1~.icon{
       padding:0 10px;
    }
    .vform-title::after{
      content: "*";
      color: red;
      margin-left: 0px;
      // position: absolute;
      // left: 0;
      // top: 50%;
      // transform: translateY(-50%);
    }
  }
  </style>

  <style scoped>
.custom-select .el-input__inner {
  border: none !important;
}
</style>
  